import React, { Component } from 'react'
import { Form, Input, Checkbox, Button, Space } from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
export default class MyForm extends Component{
  formRef = React.createRef()
  onFill = () => {
    this.formRef.current.setFieldsValue({
      username: 'z',
      address: 'sy'
    })
  }
  onSubmit = () => {
    this.formRef.current.validateFields().then(values => {
      console.log(values)
    }).catch(e => {
      console.log(e)
    })
  }
  onReset = () => {
    this.formRef.current.resetFields()
  }
  render() {
    return (
      <>
        <div className="box">
          <div className="box-header">base</div>
          <div className="box-body">
            <div className="box-content">
              <Form labelCol={{ span: 8 }}initialValues={{ remember: true }} wrapperCol={{ span: 16 }} autoComplete="off">
                <Form.Item label="username" name="username" rules={[{ required: true, message: 'please input username' }]}>
                  <Input />
                </Form.Item>
                <Form.Item label="password" name="password" rules={[{ required: true, message: 'please input password' }]}>
                  <Input.Password />
                </Form.Item>
                <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                  <Checkbox>remember me</Checkbox>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                  <Button type="primary" htmlType="submit">submit</Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">ref form</div>
          <div className="box-body">
            <div className="box-content">
              <Form labelCol={{ span: 8 }} ref={this.formRef} wrapperCol={{ span: 16 }} autoComplete="off">
                <Form.Item label="username" name="username" rules={[{ required: true, message: 'plz input name' }]}>
                  <Input />
                </Form.Item>
                <Form.Item label="address" name="address" rules={[{ required: true, message: 'plz input address' }]}>
                  <Input />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                  <Button type="primary" htmlType="submit" onClick={this.onSubmit}>submit</Button>
                  <Button htmlType="button" onClick={this.onReset}>reset</Button>
                  <Button type="link" htmlType="button" onClick={this.onFill}>fill</Button>
                </Form.Item>
              </Form>
            </div>
          </div>
          <div className="box-footer error">
            <p>被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果</p>
            <p style={{ textIndent: 28 }}>1.你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。</p>
            <p style={{ textIndent: 28 }}>2.你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。</p>
            <p style={{ textIndent: 28 }}>3.你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。</p>
          </div>
        </div>
        <div className="box">
          <div className="box-header">dynamic</div>
          <div className="box-body">
            <div className="box-content">
              <Form name="dynamic_form_nest_item" autoComplete="off">
                <Form.List name="users">
                  {(fields, { add, remove }) => (
                    <>
                      {fields.map(({ key, name, ...restFields }) => (
                        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                          <Form.Item {...restFields} name={[name, 'first']} rules={[{ required: true, message: 'plz input first name' }]}>
                            <Input placeholder="first name" />
                          </Form.Item>
                          <Form.Item {...restFields} name={[name, 'last']} rules={[{ required: true, message: 'plz input last name' }]}>
                            <Input placeholder="last name" />
                          </Form.Item>
                          <MinusCircleOutlined onClick={() => remove(name)} />
                        </Space>
                      ))}
                      <Form.Item>
                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>add</Button>
                      </Form.Item>
                    </>
                  )}
                </Form.List>
                <Form.Item>
                  <Button type="primary" htmlType="submit">submit</Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </>
    )
  }
}